<script setup>
import {  watch, ref, onMounted } from "vue";
const audio = ref(null);
const props = defineProps(["content"]);
watch(
  () => props.content,
  (newValue) => {
    console.log(newValue);
  },
  {
    deep: true,
  }
);
onMounted(() => {
  if (props.content.delay) {
    setTimeout(() => {
      audio.value.play();
    }, props.content.delay);
  } else if (props.content.releaseSettings) {
    audio.value.play();
  }
});
</script>
<template>
  <div class="audio-root">
    <div class="manual-release" v-if="!props.content.releaseSettings">
      <div class="audio-warpper-left">
        <img src="../../assets/bianzhu.png" alt="" />
        <span>我有话对你说…</span>
      </div>
      <div class="right" @click="() => audio.play()">
        <img src="../../assets/sftp.png" alt="" srcset="" />
      </div>
    </div>
    <audio
      style="display: none"
      :loop="!!props.content.duplicate"
      ref="audio"
      :src="props.content.url"
    />
  </div>
</template>

<style lang="less" scoped>
.audio-root {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 115px;
  display: flex;
  justify-content: center;
}
.manual-release {
  width: 420px;
  height: 68px;
  padding: 0 20px 0 57px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  opacity: 0.6;
  .audio-warpper-left {
    font-size: 24px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #9de3aa;
    position: relative;
    img {
      position: absolute;
      left: -90px;
      top: -50px;
      width: 83px;
      height: 112px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    img {
      width: 38px;
      height: 38px;
    }
  }
}
</style>
